<!DOCTYPE HTML>
<html lang="zh">
<meta charset="utf-8">
<head>
    <link href="/aityWeb/static/css/font-awesome.css" rel="stylesheet"/>

    <style type="text/css">
        .nav > li:hover .dropdown-menu {display: block;}
    </style>

	<link href="/aityWeb/static/css/bootstrap.min.css" rel="stylesheet"/>
	<link href="/aityWeb/static/css/font-awesome.css" rel="stylesheet"/>

	<link href="/aityWeb/static/css/animate.css" rel="stylesheet"/>
	<link href="/aityWeb/static/css/style.css" rel="stylesheet"/>
	<link href="/aityWeb/static/css/checkbox.css" rel="stylesheet"/>
	<link href="/aityWeb/static/ajax/libs/select/select2.css" rel="stylesheet"/>
    <link href="/aityWeb/static/galaxy/css/ry-ui.css" rel="stylesheet"/>

	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    
    <style>
    	.box-title-d{
    		/*border-top: 5px solid red; 1A7BB9*/
    		width: 100%;
    		background-color: #1A7BB9;
    		padding: 10px 10px;
    		color: #FFF;
    		/*border: 1px solid #cccccc;*/
    		/*border-left: 3px solid green;*/

    	}
    	.box-title-d span{
			font-weight: bold;
    	}
    	.box-title-pa-tb{
    		margin: 30px 0;
    	}
    	.box-title-pa-t{
    		margin-top: 30px ;
    	}

    	.bt-mar-lr{
    		margin: 0 20px;
    	}
		.waring{
			position: absolute;
			display: block;
			top: 5px;
			width: 100%;
			margin: 0px;
			padding: 10px 10px;
			background-color: rgba(236,71,88,.5);
			color: #fff;
			text-align: left;
			font-weight: 500;
			font-size: 18px;
		}
		　/*隐藏掉我们模型的checkbox*/
		.my_protocol .input_agreement_protocol {
			appearance: none;
			-webkit-appearance: none;
			outline: none;
			display: none;
		}
		/*未选中时*/
		.my_protocol .input_agreement_protocol+span {
			width: 16px;
			height: 16px;
			background-color: red;
			display: inline-block;
			background: url(../../static/img/icon_checkbox.png) no-repeat;
			background-position-x: 0px;
			background-position-y: -25px;
			position: relative;
			top: 3px;
		}
		/*选中checkbox时,修改背景图片的位置*/
		.my_protocol .input_agreement_protocol:checked+span {
			background-position: 0 0px
		}
		.div-inline{ display:inline-block}
	</style>
</head>
<body class="gray-bg" style="background-color: #F9F9F9">
<div class="container-div">
	<div class="row">
		<div class="col-sm-12 select-info" style="padding-top: 10px;">
			<!-- <ul class="breadcrumb" style="font-size: 16px;background-color: #f3f3f3;padding: 5px 10px;color: #337ab7;">
			    <li><i class="fa fa-home" aria-hidden="true"></i>&nbsp;&nbsp;<a href="#">首页</a></li>
			    <li><i class="fa fa-home" aria-hidden="true"></i>&nbsp;&nbsp;<a href="#">俱乐部管理</a></li>
			    <li class="active"><a href="#">编辑</a></li>
			</ul> -->

			<div style="text-align: center;font-weight: 500;">
				<h1>访客预约开卡</h1>
			</div>
			<div style="text-align: right;font-weight: 500;padding-right: 40px;">
				<label style="font-weight: bold;">当前时间：</label><span>2018-12-12 10:12:00</span>
			</div>
			<div class="col-sm-3 " style="padding-top: 10px;height: 100%">
				<div class="box-title-d">
					<span>访客信息</span>
				</div>
				<form class="form-horizontal" role="form" style="height:590px;padding: 20px 10px 20px 0;background-color: #F9F9F9;">
					  <div class="form-group">
					    <label for="jlbmc" class="col-sm-3 control-label">姓名</label>
					    <div class="col-sm-9">
					      <input type="text" class="form-control" id="jlbmc" placeholder="">
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="responsiblename" class="col-sm-3 control-label">证件号码</label>
					    <div class="col-sm-9">
					      <input type="text" class="form-control" id="responsiblename" placeholder="">
					    </div>
					  </div>
						<div class="form-group">
					    <label for="groupnumber" class="col-sm-3 control-label">性别</label>
					    <div class="col-sm-9">
							<select class="form-control">
								<option value="">--请选择--</option>
								<option value="1" selected = "selected">男</option>
								<option value="2">女</option>
							</select>
					    </div>
					  </div>

					  <div class="form-group">
					    <label for="desc" class="col-sm-3 control-label">证件地址</label>
					    <div class="col-sm-9">
					      <textarea rows="3" class="form-control"  id="desc" placeholder=""></textarea>
					    </div>
					  </div>
						<div class="form-group">
					    <label for="groupnumber" class="col-sm-3 control-label">联系电话</label>
					    <div class="col-sm-9">
					      <input type="text" class="form-control" id="groupnumber" placeholder="">
					    </div>
					  </div>

					  	<div class="form-group">
					    <label for="groupnumber" class="col-sm-3 control-label">访客单位</label>
					    <div class="col-sm-9">
					      <input type="text" class="form-control" id="groupnumber" placeholder="">
					    </div>
					  </div>

					  	<div class="form-group">
					    <label for="groupnumber" class="col-sm-3 control-label">车辆号码</label>
					    <div class="col-sm-9">
					      <input type="text" class="form-control" id="groupnumber" placeholder="" value="无">
					    </div>
					  </div>


					  	<div class="form-group">
					    <label for="groupnumber" class="col-sm-3 control-label">寄存物品</label>
					    <div class="col-sm-9">
					      <input type="text" class="form-control" value="无" id="groupnumber" placeholder="">
					    </div>
					  </div>

					  	<div class="form-group">
					    <label for="groupnumber" class="col-sm-3 control-label">预约渠道</label>
					    <div class="col-sm-9">
					      <input type="text" class="form-control" value="微信公众号" id="groupnumber" placeholder="">
					    </div>
					  </div>

					  <!--<div class="form-group">-->
					    <!--<label for="groupnumber" class="col-sm-3 control-label">联系电话</label>-->
					    <!--<div class="col-sm-9">-->
					      <!--<input type="text" class="form-control" id="groupnumber" placeholder="">-->
					    <!--</div>-->
					  <!--</div>-->

					  	<!--<div class="form-group">-->
					    <!--<label for="groupnumber" class="col-sm-3 control-label">联系电话</label>-->
					    <!--<div class="col-sm-9">-->
					      <!--<input type="text" class="form-control" id="groupnumber" placeholder="">-->
					    <!--</div>-->
					  <!--</div>-->

					  	<div class="form-group">
					    <label for="groupnumber" class="col-sm-3 control-label">预计离开</label>
					    <div class="col-sm-9">
					      <input type="text" class="form-control" id="groupnumber" placeholder="">
					    </div>
					  </div>

				</form>
			</div>

			<div class="col-sm-3 " style="padding-top: 10px;height: 100%">
				<div class="box-title-d">
					<span>接待信息</span>
				</div>
				<form class="form-horizontal" role="form" style="height:590px;padding: 20px 5px 20px 0 ;background-color: #F9F9F9;">
					<div style="background-color: #F9F9F9;">
					  <div class="form-group">
					    <label for="jlbmc" class="col-sm-3 control-label">姓名：</label>
					    <div class="col-sm-9">
							<form role="form">
								<div class="input-group">
									<input type="text" class="form-control">
									<span class="input-group-addon">
									  <a href="#">
									  <i class="glyphicon glyphicon-search"></i>
									  </a>
								   </span>
								</div>
							</form>
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="responsiblename" class="col-sm-3 control-label">电话：</label>
					    <div class="col-sm-9">
					      <input type="text" class="form-control" id="responsiblename" placeholder="">
					    </div>
					  </div>
						<div class="form-group">
					    <label for="groupnumber" class="col-sm-3 control-label">部门：</label>
					    <div class="col-sm-9">
					      <input type="text" class="form-control" id="groupnumber" placeholder="">
					    </div>
					  </div>
						<div class="form-group">
					    <label for="groupnumber" class="col-sm-3 control-label">位置：</label>
					    <div class="col-sm-9">
					      <input type="text" class="form-control" id="groupnumber" placeholder="">
					    </div>
					  </div>

					<div class="box-title-d box-title-pa-tb">
						<span>其他信息</span>
					</div>

					<div class="form-group">
					    <label for="groupnumber" class="col-sm-3 control-label">人数：</label>
					    <div class="col-sm-9">
					      <input type="text" class="form-control" value="1" id="groupnumber" placeholder="">
					    </div>
					 </div>
					 <div class="form-group">
					    <label for="groupnumber" class="col-sm-3 control-label">类型：</label>
					    <div class="col-sm-9">
							<select class="form-control">
								<option value="1" selected = "selected" >身份证</option>
								<option value="2">护照</option>
								<option value="3">其他</option>
							</select>
					    </div>
					 </div>
					 <div class="form-group">
					    <label for="groupnumber" class="col-sm-3 control-label">卡号：</label>
					    <div class="col-sm-9">
					      <input type="text" class="form-control" id="groupnumber" placeholder="">
					    </div>
					 </div>
					 <div class="form-group">
					    <label for="groupnumber" class="col-sm-3 control-label">事由：</label>
					    <div class="col-sm-9">
					      <input type="text" class="form-control" id="groupnumber" placeholder="">
					    </div>
					 </div>
					 <!--<div class="form-group">-->
					    <!--<label for="groupnumber" class="col-sm-3 control-label">事由：</label>-->
					    <!--<div class="col-sm-9">-->
					      <!--<input type="text" class="form-control" id="groupnumber" placeholder="">-->
					    <!--</div>-->
					 <!--</div>-->
					 <div class="form-group">
					    <label for="groupnumber" class="col-sm-3 control-label">备注：</label>
					    <div class="col-sm-9">
					       <textarea rows="3" class="form-control"  id="desc" placeholder=""></textarea>
					    </div>
					 </div>
					</div>
				</form>
			</div>


			<div class="col-sm-3 " style="padding-top: 10px;height: 100%">
				<div class="box-title-d">
					<span>证件照</span>
				</div>
				<div style="text-align: center;background-color: #909090;position: relative;">
					<p class="waring">
						<span class="glyphicon glyphicon-remove" style="border: 1px solid #FFF;border-radius: 100%;padding: 5px;"></span>
						提示：请放入二代身份证件进行识别
					</p >
					<img height="300px;" width="100%" src="http://5b0988e595225.cdn.sohucs.com/images/20171113/f20e74d13b2444e081954fe86b613dff.jpeg">
				</div>

				<div class="box-title-d box-title-pa-t">
					<span>拍照操作</span>
				</div>
				<div style="background-color: snow;height: 220px;width: 100%">
					<div class="col-sm-12 " style="padding-top: 10px; text-align: center;">
						<button type="button" class="btn btn-success btn-lg bt-mar-lr">
							开始拍照
						</button>
						<button type="button" class="btn btn-success btn-lg bt-mar-lr">
							重新拍照
						</button>
					</div>
					<div class="col-sm-12 " style="padding-top: 10px; text-align: center;">
						<button type="button" class="btn btn-success btn-lg bt-mar-lr">
							保存照片
						</button>
						<button type="button" class="btn btn-success btn-lg bt-mar-lr">
							删除照片
						</button>
					</div>

			</div>
			</div>


			<div class="col-sm-3 " style="padding-top: 10px;height: 100%">
				<div class="box-title-d">
					<span>访客头像</span>
				</div>
				<div style="text-align: center;background-color: #333;">
					<img height="300px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1543558819528&di=e2a1953bdf716c4eb1a5117a59ef5be8&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3Dd44841f77c094b36cf9f13aecba516ac%2Fadaf2edda3cc7cd968f58bf13301213fb80e913a.jpg">
				</div>
				
				<div class="box-title-d box-title-pa-t">
					<span>请选择门禁权限</span>
				</div>
				<div style="background-color: snow;height: 220px;width: 100%">

					<div style="background-color: snow;height: 220px;width: 100%">
						<label for="groupnumber" class="col-sm-4 control-label">A单元</label>
						<div class="form-group div-inline">
							<div class="col-sm-offset-1 col-sm-3">
								<label class="my_protocol">
									<input class="input_agreement_protocol" type="checkbox" style="display:none;"/>
									<span></span>
									一楼
								</label>
							</div>
							<div class="col-sm-offset-1 col-sm-3">
								<label class="my_protocol">
									<input class="input_agreement_protocol" type="checkbox" style="display:none;"/>
									<span></span>
									二楼
								</label>
							</div>
							<div class="col-sm-offset-1 col-sm-3">
								<label class="my_protocol">
									<input class="input_agreement_protocol" type="checkbox" style="display:none;"/>
									<span></span>
									三楼
								</label>
							</div>
							<div class="col-sm-offset-1 col-sm-3">
								<label class="my_protocol">
									<input class="input_agreement_protocol" type="checkbox" style="display:none;"/>
									<span></span>
									四楼
								</label>
							</div>
							<div class="col-sm-offset-1 col-sm-3">
								<label class="my_protocol">
									<input class="input_agreement_protocol" type="checkbox" style="display:none;"/>
									<span></span>
									五楼
								</label>
							</div>
							<div class="col-sm-offset-1 col-sm-3">
								<label class="my_protocol">
									<input class="input_agreement_protocol" type="checkbox" style="display:none;"/>
									<span></span>
									六楼
								</label>
							</div>
							<div class="col-sm-offset-1 col-sm-3">
								<label class="my_protocol">
									<input class="input_agreement_protocol" type="checkbox" style="display:none;"/>
									<span></span>
									七楼
								</label>
							</div>
							<div class="col-sm-offset-1 col-sm-3">
								<label class="my_protocol">
									<input class="input_agreement_protocol" type="checkbox" style="display:none;"/>
									<span></span>
									八楼
								</label>
							</div>
						</div>
						<label for="groupnumber" class="col-sm-4 control-label">B单元</label>
						<div class="form-group div-inline">
							<div class="col-sm-offset-1 col-sm-3">
								<label class="my_protocol">
									<input class="input_agreement_protocol" type="checkbox" style="display:none;"/>
									<span></span>
									一楼
								</label>
							</div>
							<div class="col-sm-offset-1 col-sm-3">
								<label class="my_protocol">
									<input class="input_agreement_protocol" type="checkbox" style="display:none;"/>
									<span></span>
									二楼
								</label>
							</div>
							<div class="col-sm-offset-1 col-sm-3">
								<label class="my_protocol">
									<input class="input_agreement_protocol" type="checkbox" style="display:none;"/>
									<span></span>
									三楼
								</label>
							</div>
							<div class="col-sm-offset-1 col-sm-3">
								<label class="my_protocol">
									<input class="input_agreement_protocol" type="checkbox" style="display:none;"/>
									<span></span>
									四楼
								</label>
							</div>
							<div class="col-sm-offset-1 col-sm-3">
								<label class="my_protocol">
									<input class="input_agreement_protocol" type="checkbox" style="display:none;"/>
									<span></span>
									五楼
								</label>
							</div>
							<div class="col-sm-offset-1 col-sm-3">
								<label class="my_protocol">
									<input class="input_agreement_protocol" type="checkbox" style="display:none;"/>
									<span></span>
									六楼
								</label>
							</div>
							<div class="col-sm-offset-1 col-sm-3">
								<label class="my_protocol">
									<input class="input_agreement_protocol" type="checkbox" style="display:none;"/>
									<span></span>
									七楼
								</label>
							</div>
							<div class="col-sm-offset-1 col-sm-3">
								<label class="my_protocol">
									<input class="input_agreement_protocol" type="checkbox" style="display:none;"/>
									<span></span>
									八楼
								</label>
							</div>
						</div>
					</div>

				</div>
				</div>
			<div class="col-sm-12" style="padding-top: 10px; text-align: center;">
				<button type="button" class="btn btn-warning btn-lg bt-mar-lr">
					<span class="glyphicon glyphicon-refresh"></span>
					重新开始
				</button>
				<button type="button" class="btn btn-success btn-lg bt-mar-lr">
					<span class="glyphicon glyphicon-ok"></span>
					保存登记
				</button>
				<button type="button" class="btn btn-danger btn-lg bt-mar-lr">
					<span class="glyphicon glyphicon-credit-card"></span>
					证件识别</button>
				<button type="button" class="btn btn-info btn-lg bt-mar-lr" onclick="history()">
					<span class="glyphicon glyphicon-align-justify"></span>
					查看记录
				</button>
			</div>
		</div>
	</div>
</div>


	</div>
</div>

	<script src="/aityWeb/static/js/jquery.min.js"></script>
	<script src="/aityWeb/static/js/bootstrap.min.js"></script>

	
	<!-- jquery-validate 表单验证插件 -->
	<script src="/aityWeb/static/ajax/libs/validate/jquery.validate.min.js"></script>
	<script src="/aityWeb/static/ajax/libs/validate/messages_zh.min.js"></script>
	<script src="/aityWeb/static/ajax/libs/validate/jquery.validate.extend.js"></script>
	<!-- jquery-validate 表单树插件 -->
	<script src="/aityWeb/static/ajax/libs/bootstrap-treetable/bootstrap-treetable.js"></script>

	<!-- 遮罩层 -->
	<script src="/aityWeb/static/ajax/libs/blockUI/jquery.blockUI.js"></script>
	<script src="/aityWeb/static/ajax/libs/layer/layer.min.js"></script>
	<script src="/aityWeb/static/ajax/libs/layui/layui.js"></script>
	<script src="/aityWeb/static/galaxy/js/common.js?v=2.3.0"></script>
	<script src="/aityWeb/static/galaxy/js/ry-ui.js?v=2.3.0"></script>

	<script src="/aityWeb/static/js/app/net.js"></script>
	<script src="/aityWeb/static/js/app/app.js"></script>
	<script src="/aityWeb/static/js/lib/MD5.js"></script>

<script type="text/javascript">
    function history() {
        window.location.href="/aityWeb/view/fangke/appointment.html";
    }
</script>

	<script type="text/javascript">
        var re = GetRequest();
        var clubid = re['id'];

        $(function() {

            if(clubid && 'undefined' != clubid){

                selectById(clubid);
			}
        });

        function selectById(){

            //查询参数准备
            var info = {
                page: 1,
                rows: 100,
                type:"select",
                id:parseInt(clubid)
            };
            //接口调用
            doPost("club/getClub",info,function(data){
                var row = data.data.rows[0];
                $("#jlbmc").val(row.name);
                $("#responsiblename").val(row.responsiblename);
                $("#groupnumber").val(row.groupnumber);
                $("#desc").val(row.desc);
            });
        }

        function save(){
            var info = {
                page: 1,
                rows: 100,
                name:$("#jlbmc").val(),
                responsibleName:$("#responsiblename").val(),
                groupNumber:$("#groupnumber").val(),
                desc:$("#desc").val()
            };
            var url ="";
            if(clubid && 'undefined' != clubid){
                info.id = parseInt(clubid);
                info.type = "update";
			}else{
                info.type = "add";
			}
            //接口调用
            doPost("club/getClub",info,function(data){
                if(data.status == 200){
                    $.loadInner.updateUrl("/aityWeb/view/clubManger/list.html");
				}

            });
		}

	    function clubSave(){
	        $.loadInner.updateUrl("/aityWeb/view/clubManger/list.html");
	    }

	    function clubReturn() {
	        $.loadInner.updateUrl("/aityWeb/view/clubManger/list.html");
	    }

        function GetRequest() {
            var url = location.search; //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for(var i = 0; i < strs.length; i ++) {
                    var name = strs[i].split("=")[0];
                    var value = strs[i].split("=")[1];
                    //theRequest[name]=unescape(value);
                    theRequest[name]=decodeURI(value);
                }
            }
            return theRequest;
        };

</script>
</body>
</html>

